<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataLink 登录测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #1890ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }
        .error {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
            color: #ff4d4f;
        }
        .info {
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            color: #1890ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DataLink 登录测试</h1>
        
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" value="admin">
        </div>
        
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" value="datalink">
        </div>
        
        <div class="form-group">
            <label for="apiUrl">API地址:</label>
            <input type="text" id="apiUrl" value="http://localhost:8000/api/auth/user/login">
        </div>
        
        <button onclick="testLogin()">测试登录</button>
        <button onclick="testDirect()">直接访问后端</button>
        <button onclick="clearResult()">清除结果</button>
        
        <div id="result"></div>
    </div>

    <script>
        function showResult(message, type = 'info') {
            const resultDiv = document.getElementById('result');
            resultDiv.className = `result ${type}`;
            resultDiv.textContent = message;
        }

        function clearResult() {
            document.getElementById('result').textContent = '';
            document.getElementById('result').className = 'result';
        }

        async function testLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const apiUrl = document.getElementById('apiUrl').value;
            
            showResult('正在测试登录...', 'info');
            
            try {
                const formData = new URLSearchParams();
                formData.append('username', username);
                formData.append('password', password);
                
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: formData
                });
                
                const responseText = await response.text();
                
                if (response.ok) {
                    showResult(`登录成功!\n状态码: ${response.status}\n响应: ${responseText}`, 'success');
                } else {
                    showResult(`登录失败!\n状态码: ${response.status}\n错误: ${responseText}`, 'error');
                }
            } catch (error) {
                showResult(`请求失败!\n错误: ${error.message}`, 'error');
            }
        }

        async function testDirect() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            showResult('正在直接访问后端...', 'info');
            
            try {
                const formData = new URLSearchParams();
                formData.append('username', username);
                formData.append('password', password);
                
                const response = await fetch('http://127.0.0.1:9966/api/auth/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: formData,
                    mode: 'cors'
                });
                
                const responseText = await response.text();
                
                if (response.ok) {
                    showResult(`直接访问成功!\n状态码: ${response.status}\n响应: ${responseText}`, 'success');
                } else {
                    showResult(`直接访问失败!\n状态码: ${response.status}\n错误: ${responseText}`, 'error');
                }
            } catch (error) {
                showResult(`直接访问失败!\n错误: ${error.message}`, 'error');
            }
        }
    </script>
</body>
</html>
